<template>
  <el-container class="h-100" v-loading="loading">
    <el-header class="bg-white shadow-sm" style="height: 80px;line-height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <h5 class="d-inline">外网核查工作监管</h5>
        <div class="float-right">
          <strong class="mr-5">统计汇总</strong>
          <span v-show="statistics.name">核查人员姓名:<strong class="mr-5">name</strong></span>
          <span>已通过总数：<strong class="mr-5">{{statistics.ytg}}</strong></span>
          <span>不通过总数：<strong class="mr-5">{{statistics.btg}}</strong></span>
          <span v-show="statistics.dd">待定总数：<strong class="mr-5">{{statistics.dd}}</strong></span>
          <span>已上报总数：<strong class="mr-5">{{statistics.ysb}}</strong></span>
          <span>已打回总数：<strong class="mr-5">{{statistics.ydh}}</strong></span>
        </div>
      </div>
    </el-header>
    <el-main class="m-2 bg-white">
      <!-- 核查角色选择 -->
      <el-select placeholder="请选择" v-model="userType" size="small" style="width: 120px;">
        <el-option v-for="item in optionsuserType" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <!-- 图斑和地类样本 -->
      <el-select placeholder="请选择" v-model="progressType" size="small" style="width: 120px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <!-- 作业单位 -->
      <el-select placeholder="请选择作业单位" v-model="company" size="small" style="width: 200px;">
        <el-option v-for="item in optionEns" :key="item.id" :label="item.name" :value="item.name === '全部' ? '' : item.name">
        </el-option>
      </el-select>
      <el-date-picker :clearable="false" size="small" v-model="date" type="daterange" align="right"
        unlink-panels format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
      </el-date-picker>
      <el-input v-model="userName" placeholder="核查人员姓名" size="small" style="width: 150px;"
        clearable></el-input>
      <el-select v-model="cityId" placeholder="请选择市" style="width: 200px;" clearable size="small" v-permission="[1]">
        <el-option v-for="(val, key) in city" :filterable="true" :key="key" :label="val" :value="key">
        </el-option>
      </el-select>
      <el-select v-model="areaId" placeholder="请选择区县" ref="area" clearable size="small" @change="setData(areaId)" v-permission="[1, 3]">
        <el-option v-for="(val, key) in area" :filterable="true" :key="key" :label="val" :value="key">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" size="small" @click="changedSearch" class="mt-2">搜索</el-button>
      <el-button type="primary" class="float-right" @click="exportExcel" size="small">报表导出<i class="el-icon-download"></i></el-button>
      <el-table :data="datas" style="width: 100%">
        <el-table-column label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column prop="userName" label="核查人员" align="center">
        </el-table-column>
        <el-table-column prop="company" label="作业单位" align="center">
        </el-table-column>
        <el-table-column prop="ytg" label="已通过" align="center">
        </el-table-column>
        <el-table-column prop="btg" label="不通过" align="center">
        </el-table-column>
        <el-table-column prop="dd" label="待定" align="center" v-if="selectedUserType === '1'">
        </el-table-column>
        <el-table-column prop="ysb" :label="selectedUserType === '1' ? '已上报负责人' : '已上报监理'" align="center">
        </el-table-column>
        <el-table-column prop="ydh" label="已打回市县" align="center">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
// import axios from "axios";
import pca from '@/libs/pca-code'

export default {
  name: "work-statistics",
  title: "外网核查工作监管",
  data() {
    this.$get('survey/enterprise/getEnterpriseList').then(res => {
      this.optionEns = res.data.data
      this.optionEns.unshift({ name: '全部' })
    })
    // axios.get('survey/enterprise/getEnterpriseList').then(res => {
    //   if (res.data.code === '200') {
    //     this.optionEns = res.data.data
    //     this.optionEns.unshift({name: '全部'})
    //   } else {
    //     this.$codeError(res)
    //   }
    // }).catch(error => {
    //   this.$catchError(error)
    // })
    return {
      cityId: '',
      areaId: '',
      loading: false,
      userType: "1",
      progressType: '1',
      company: '',
      date: [this.$formatYMD(), this.$formatYMD()], // 设计只查询当天的统计数据，不需要用户输入日期
      userName: '',
      statistics: {},
      datas: [],
      selectedUserType: '1',
      optionEns: [],
      optionsuserType: [
        {
          value: "1",
          label: "核查人员"
        },
        {
          value: "2",
          label: "核查负责人"
        }
      ],
      options: [
        {
          value: "1",
          label: "初次举证"
        },
        {
          value: "2",
          label: "地类样本"
        },
        {
          value: "3",
          label: "补充举证"
        },
        {
          value: "4",
          label: "外业核查"
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  mounted() {
    this.changedSearch()
  },
  methods: {
    changedSearch() {
      this.loading = true;
      this.selectedUserType = this.userType
      let url = 'survey/expert/getExpertStatistic'
      if (this.progressType === '3') {
        url = 'survey/bc/expert/getExpertStatistic'
      }
      if (this.progressType === '4') {
        url = 'survey/hc/expert/getExpertStatistic'
      }
      this.$get(url, {
        userType: this.userType,
        progressType: this.progressType === '3' ? '1' : this.progressType,
        userName: this.userName,
        company: this.company,
        startDate: `${this.date[0]} 00:00:00`,
        endDate: `${this.date[1]} 23:59:59`,
      }).then(res => {
        this.statistics = res.data.data.shift()
        this.datas = res.data.data
      }).finally(() => {
        this.loading = false;
      });
      // axios.get(this.$paramsConnect('survey/expert/getExpertStatistic', {
      //   userType: this.userType,
      //   progressType: this.progressType,
      //   userName: this.userName,
      //   company: this.company,
      //   startDate: `${this.date[0]} 00:00:00`,
      //   endDate: `${this.date[1]} 23:59:59`,
      // })).then(res => {
      //     if (res.data.code === '200') {
      //       this.statistics = res.data.data.shift()
      //       this.datas = res.data.data
      //     } else {
      //       this.$codeError(res)
      //     }
      //   }).catch(error => {
      //     this.$catchError(error);
      //   }).finally(() => {
      //     this.loading = false;
      //   });
    },
    exportExcel() {
      let obj = {
        userType: this.userType,
        progressType: this.progressType,
        userName: this.userName,
        company: this.company,
        oauth: this.$store.state.user.user.oauth,
        startDate: `${this.date[0]} 00:00:00`,
        endDate: `${this.date[1]} 23:59:59`,
      }
      this.$exportExcel(this.$paramsConnect('survey/downExcel/downInspectorExcel', obj))
    }
  },
  computed: {
    city() {
      let type = this.$store.getters.userType
      if (type === 1) {
        return pca[610000]
      } else {
        return []
      }
      
    },
    area() {
      let type = this.$store.getters.userType
      if (type === 1) {
        this.areaId = ''
        return this.cityId ? pca[this.cityId] : {}
      } else {
        return pca[this.$store.getters.cityId]
      }
    },
  }
};
</script>